<template>
  <div class="date-demo">
    <h2>日期选择器演示</h2>
    <p class="demo-desc">支持单个日期选择和日期段选择，样式与多选框风格一致</p>

    <div class="demo-container">
      <div class="demo-section">
        <h3>
          📅 基础日期选择
          <small style="color: #999; font-weight: normal">(支持年份导航)</small>
        </h3>
        <div class="demo-item">
          <label>选择日期:</label>
          <DateSelectComponent v-model="basicDate" placeholder="请选择日期" />
          <span>当前值: {{ basicDate || "未选择" }}</span>
        </div>

        <div class="demo-item">
          <label>生日选择:</label>
          <DateSelectComponent v-model="birthday" placeholder="选择生日" />
          <span>当前值: {{ birthday || "未选择" }}</span>
        </div>
      </div>

      <div class="demo-section">
        <h3>
          📆 日期段选择
          <small style="color: #999; font-weight: normal"
            >(支持快捷选择和年份导航)</small
          >
        </h3>
        <div class="demo-item">
          <label>假期时间:</label>
          <DateSelectComponent
            v-model="vacationDates"
            :isRange="true"
            startPlaceholder="开始日期"
            endPlaceholder="结束日期"
          />
          <div class="date-range-display">
            <p>开始: {{ vacationDates?.[0] || "未选择" }}</p>
            <p>结束: {{ vacationDates?.[1] || "未选择" }}</p>
            <p>共计: {{ calculateDays(vacationDates) }}天</p>
          </div>
        </div>

        <div class="demo-item">
          <label>项目周期:</label>
          <DateSelectComponent
            v-model="projectDates"
            :isRange="true"
            startPlaceholder="项目开始"
            endPlaceholder="项目结束"
          />
          <div class="date-range-display">
            <p>时间段: {{ formatDateRange(projectDates) }}</p>
            <p>工期: {{ calculateDays(projectDates) }}天</p>
          </div>
        </div>

        <div class="demo-item">
          <label>数据统计时间:</label>
          <DateSelectComponent
            v-model="statisticsDates"
            :isRange="true"
            startPlaceholder="统计开始"
            endPlaceholder="统计结束"
          />
          <div class="date-range-display">
            <div class="quick-demo-tip">
              💡
              提示：点击日期选择器可使用快捷选择（近一周、近一个月、近三个月）
            </div>
            <p>时间段: {{ formatDateRange(statisticsDates) }}</p>
            <p>统计天数: {{ calculateDays(statisticsDates) }}天</p>
          </div>
        </div>
      </div>

      <div class="demo-section">
        <h3>📋 活动管理</h3>
        <div class="activity-list">
          <div
            v-for="(activity, index) in activities"
            :key="index"
            class="activity-item"
          >
            <div class="activity-info">
              <input
                v-model="activity.name"
                class="activity-name"
                placeholder="活动名称"
              />
              <select v-model="activity.type" class="activity-type">
                <option value="meeting">会议</option>
                <option value="training">培训</option>
                <option value="event">活动</option>
                <option value="project">项目</option>
              </select>
            </div>
            <div class="activity-date">
              <DateSelectComponent
                v-model="activity.dateRange"
                :isRange="true"
                startPlaceholder="开始"
                endPlaceholder="结束"
              />
            </div>
            <button
              class="remove-btn"
              @click="removeActivity(index)"
              v-if="activities.length > 1"
            >
              删除
            </button>
          </div>
          <button class="add-btn" @click="addActivity">+ 添加活动</button>
        </div>
      </div>

      <div class="demo-section">
        <h3>🏢 员工管理</h3>
        <div class="employee-form">
          <div class="form-row">
            <div class="form-group">
              <label>入职日期:</label>
              <DateSelectComponent
                v-model="employeeInfo.joinDate"
                placeholder="选择入职日期"
              />
            </div>
            <div class="form-group">
              <label>试用期:</label>
              <DateSelectComponent
                v-model="employeeInfo.probationPeriod"
                :isRange="true"
                startPlaceholder="试用开始"
                endPlaceholder="试用结束"
              />
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label>年假时间:</label>
              <DateSelectComponent
                v-model="employeeInfo.annualLeave"
                :isRange="true"
                startPlaceholder="年假开始"
                endPlaceholder="年假结束"
              />
            </div>
            <div class="form-group">
              <label>合同到期:</label>
              <DateSelectComponent
                v-model="employeeInfo.contractExpiry"
                placeholder="合同到期日期"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="demo-section">
        <h3>📊 数据预览</h3>
        <div class="data-preview">
          <div class="preview-card">
            <h4>基础日期</h4>
            <p>选择日期: {{ basicDate || "未设置" }}</p>
            <p>生日: {{ birthday || "未设置" }}</p>
          </div>

          <div class="preview-card">
            <h4>日期段</h4>
            <p>假期: {{ formatDateRange(vacationDates) }}</p>
            <p>项目: {{ formatDateRange(projectDates) }}</p>
            <p>统计: {{ formatDateRange(statisticsDates) }}</p>
          </div>

          <div class="preview-card">
            <h4>活动列表</h4>
            <div
              v-for="(activity, index) in activities"
              :key="index"
              class="activity-preview"
            >
              <p>
                {{ activity.name || `活动${index + 1}` }} ({{
                  getActivityTypeText(activity.type)
                }})
              </p>
              <p class="activity-date-preview">
                {{ formatDateRange(activity.dateRange) }}
              </p>
            </div>
          </div>

          <div class="preview-card">
            <h4>员工信息</h4>
            <p>入职: {{ employeeInfo.joinDate || "未设置" }}</p>
            <p>试用期: {{ formatDateRange(employeeInfo.probationPeriod) }}</p>
            <p>年假: {{ formatDateRange(employeeInfo.annualLeave) }}</p>
            <p>合同到期: {{ employeeInfo.contractExpiry || "未设置" }}</p>
          </div>
        </div>
      </div>

      <div class="demo-section">
        <h3>🚫 禁用状态</h3>
        <div class="demo-item">
          <label>禁用的日期选择器:</label>
          <DateSelectComponent
            v-model="disabledDate"
            placeholder="已禁用"
            :disabled="true"
          />
        </div>

        <div class="demo-item">
          <label>禁用的日期段选择器:</label>
          <DateSelectComponent
            v-model="disabledDateRange"
            :isRange="true"
            :disabled="true"
            startPlaceholder="已禁用"
            endPlaceholder="已禁用"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DateSelectComponent from "@/components/form/dateSelect.vue";

export default {
  name: "DateDemo",
  components: {
    DateSelectComponent,
  },
  data () {
    return {
      // 基础日期
      basicDate: "2024-03-15",
      birthday: "1990-05-20",

      // 日期段
      vacationDates: ["2024-04-01", "2024-04-07"],
      projectDates: ["2024-03-01", "2024-05-30"],
      statisticsDates: ["2024-02-01", "2024-02-29"],

      // 活动管理
      activities: [
        {
          name: "项目启动会",
          type: "meeting",
          dateRange: ["2024-03-20", "2024-03-20"],
        },
        {
          name: "团队培训",
          type: "training",
          dateRange: ["2024-04-10", "2024-04-12"],
        },
      ],

      // 员工信息
      employeeInfo: {
        joinDate: "2024-01-15",
        probationPeriod: ["2024-01-15", "2024-04-15"],
        annualLeave: ["2024-07-01", "2024-07-10"],
        contractExpiry: "2025-01-15",
      },

      // 禁用状态
      disabledDate: "2024-03-01",
      disabledDateRange: ["2024-03-01", "2024-03-07"],
    };
  },
  methods: {
    formatDateRange (dateRange) {
      if (!dateRange || !Array.isArray(dateRange)) {
        return "未设置";
      }
      return `${dateRange[0] || "未设置"} - ${dateRange[1] || "未设置"}`;
    },

    calculateDays (dateRange) {
      if (
        !dateRange ||
        !Array.isArray(dateRange) ||
        !dateRange[0] ||
        !dateRange[1]
      ) {
        return 0;
      }

      const start = new Date(dateRange[0]);
      const end = new Date(dateRange[1]);
      const diffTime = Math.abs(end - start);
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
      return diffDays;
    },

    addActivity () {
      this.activities.push({
        name: "",
        type: "meeting",
        dateRange: ["", ""],
      });
    },

    removeActivity (index) {
      this.activities.splice(index, 1);
    },

    getActivityTypeText (type) {
      const types = {
        meeting: "会议",
        training: "培训",
        event: "活动",
        project: "项目",
      };
      return types[type] || "未知";
    },
  },
};
</script>

<style lang="less" scoped>
.date-demo {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  h2 {
    color: #333;
    margin-bottom: 10px;
    text-align: center;
  }

  .demo-desc {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
    font-size: 14px;
  }

  .demo-container {
    display: grid;
    gap: 30px;
  }

  .demo-section {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #f0f0f0;

    h3 {
      color: #333;
      margin-bottom: 20px;
      font-size: 18px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .demo-item {
      display: grid;
      grid-template-columns: 120px 1fr 1fr;
      align-items: center;
      gap: 20px;
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      label {
        font-size: 14px;
        color: #555;
        font-weight: 500;
      }

      span {
        font-size: 14px;
        color: #666;
      }

      .date-range-display p {
        margin: 4px 0;
        font-size: 14px;
        color: #666;
      }

      .quick-demo-tip {
        margin: 8px 0;
        padding: 8px 12px;
        background: linear-gradient(135deg, #fff7e6, #fef3e2);
        border: 1px solid #f5d659;
        border-radius: 4px;
        font-size: 12px;
        color: #b7860d;
        border-left: 3px solid #f5d659;
      }
    }
  }

  .activity-list {
    .activity-item {
      display: grid;
      grid-template-columns: 2fr 2fr auto;
      align-items: center;
      gap: 15px;
      padding: 15px;
      border: 1px solid #eee;
      border-radius: 8px;
      margin-bottom: 12px;
      background: #fafafa;

      .activity-info {
        display: flex;
        gap: 10px;

        .activity-name {
          flex: 2;
          padding: 8px 12px;
          border: 1px solid #ddd;
          border-radius: 4px;
          font-size: 14px;
          background: #fff;

          &:focus {
            outline: none;
            border-color: #4b58dc;
          }
        }

        .activity-type {
          flex: 1;
          padding: 8px 12px;
          border: 1px solid #ddd;
          border-radius: 4px;
          font-size: 14px;
          background: #fff;

          &:focus {
            outline: none;
            border-color: #4b58dc;
          }
        }
      }

      .remove-btn {
        padding: 6px 12px;
        background: #f56565;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;

        &:hover {
          background: #e53e3e;
        }
      }
    }

    .add-btn {
      padding: 12px 20px;
      background: #4b58dc;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        background: lighten(#4b58dc, 10%);
        transform: translateY(-1px);
      }
    }
  }

  .employee-form {
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;

        label {
          font-size: 14px;
          color: #555;
          font-weight: 500;
        }
      }
    }
  }

  .data-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;

    .preview-card {
      padding: 20px;
      background: linear-gradient(135deg, #f5f7ff, #e8f2ff);
      border-radius: 8px;
      border: 1px solid #d1e5ff;

      h4 {
        color: #4b58dc;
        margin-bottom: 15px;
        font-size: 16px;
      }

      p {
        margin: 8px 0;
        font-size: 14px;
        color: #666;
      }

      .activity-preview {
        background: #fff;
        padding: 12px;
        border-radius: 4px;
        margin: 8px 0;
        border: 1px solid #eee;

        .activity-date-preview {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .date-demo {
    padding: 15px;

    .demo-section .demo-item {
      grid-template-columns: 1fr;
      gap: 10px;

      label {
        font-weight: 600;
      }
    }

    .activity-list .activity-item {
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .employee-form .form-row {
      grid-template-columns: 1fr;
    }

    .data-preview {
      grid-template-columns: 1fr;
    }
  }
}
</style>
